<template>
   <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="dynamicValidateForm">
      <a-row class="word-item" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
        <a-col :span="24">
          <a-form-model-item label="违禁词" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'domains.' + index + '.word'"
            :rules="{
              required: true,
              message: '请输入违禁词！',
              trigger: 'blur',
            }"
          >
            <a-input v-model.trim="domain.word" placeholder="请输入违禁词" :disabled="title === '详情'" ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="中文解释" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'domains.' + index + '.description'"
            :rules="{
              required: true,
              message: '请输入中文解释！',
              trigger: 'blur',
            }"
          >
            <a-textarea v-model="domain.description" rows="3" placeholder="请输入中文解释" :disabled="title === '详情'" />
          </a-form-model-item>
        </a-col>
        <a-icon
          v-if="dynamicValidateForm.domains.length > 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="dynamicValidateForm.domains.length === 1"
          @click="removeDomain(domain)"
        />
      </a-row>
      <a-form-model-item v-if="!model.id">
        <a-button type="dashed" style="width: 80%; margin-left: 10%;" @click="addDomain">
          <a-icon type="plus" />新增
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  export default {
    name: 'ProductLibraryForbiddenWordForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {},
        url: {
          add: "/hzkj-product/product/productLibrary/forbiddenWord/add",
          edit: "/hzkj-product/product/productLibrary/forbiddenWord/edit",
          queryById: "/hzkj-product/product/productLibrary/forbiddenWord/queryById"
        },
        dynamicValidateForm: {
          domains: [
            {
              word: '',
              description: ''
            }
          ],
        },
      };
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
          this.edit(this.modelDefault);
        },
        edit (record) {
          this.model = Object.assign({}, record);
          this.dynamicValidateForm.domains = [this.model];
          this.visible = true;
        },
        submitForm () {
          const that = this;
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              let params = this.dynamicValidateForm.domains;
              if(!this.model.id){
                httpurl+=this.url.add;
                method = 'post';
              }else{
                httpurl+=this.url.edit;
                method = 'put';
                params = params[0];
              }
              httpAction(httpurl, params, method).then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.$emit('ok');
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }
          
          })
        },
      removeDomain(item) {
        let index = this.dynamicValidateForm.domains.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1);
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push(
          {
            word: '',
            description: ''
          }
        );
      },
    },
  };
</script>

<style lang="less" scoped>
.word-item{
  .anticon{
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 20px;
  }
}
</style>
